<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} </view>
                <view class="giftListBox" :class="{'emptyBox':giftList.length == 0}">
                    <template v-if="giftList.length > 0">
                        <view class="giftItemBox" @click="toMyGiftDetailPage" v-for="(item,index) in giftList" :key="index">
                            <template v-if="item.type == 1">
                                <view class="tasksIcon">
                                    <img :src="item.integralPic ? item.integralPic : defaultJinfen" alt="" class="integralPic">
                                </view>
                                <view class="giftContent">
                                    <view class="giftName">{{item.integralName}}</view>
                                    <view class="giftNum">共计{{item.integralNumber?item.integralNumber:0}}份</view>
                                </view>
                            </template>
                            <template v-if="item.type == 2">
                                <view class="tasksIcon">
                                    <img :src="item.couponPic ? item.couponPic : defaultJinfen" alt="" class="couponPic">
                                </view>
                                <view class="giftContent">
                                    <view class="giftName">{{item.couponName}}</view>
                                    <view class="giftNum">共计{{item.couponNumber?item.couponNumber:0}}份</view>
                                </view>
                            </template>
                            <template v-if="item.type == 3">
                                <view class="tasksIcon">
                                    <img :src="item.nonWinningPic ? item.nonWinningPic : defaultJinfen" alt="" style="width: 202rpx; height:202rpx;">
                                </view>
                                <view class="giftContent">
                                    <view class="giftName">{{item.nonWinningName}}</view>
                                    <view class="giftTips" v-if="item.nonWinningWarmTips">{{item.nonWinningWarmTips}} </view>
                                    <!-- <view class="giftNum">共计10份</view> -->
                                </view>
                            </template>
                        </view>
                    </template>
                    <template v-else>
                        <van-empty class="custom-image"
                            image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/emptyGift.png"
                            description="暂无领取礼品" />
                    </template>
                </view>

            </view>

        </scroll-view>
        
    </view>
</template>

<script>
import {blindboxAllPriceApi} from '@/api/checkedInTask'

export default {
    components: {

    },
    data() {
        return {
            defaultJinfen:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/giftJinbi.png',
            navBarTitle: '礼品列表',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            blindBoxId:undefined, //盲盒id
            taskManagementId:undefined, //任务id
            blindBoxReceiptsRecordId:undefined, //盲盒领取记录id
            receiptsRecordId:undefined, //领取记录id
            giftList:[
                // {
                //     date:'2024/12/20',
                //     status:'已领取',
                //     num:5
                // },
                // {
                //     date:'2024/12/20',
                //     status:'已领取',
                //     num:116
                // },
                // {
                //     date:'2024/12/20',
                //     status:'已领取',
                //     num:20
                // },
            ]

        }
    },
    onLoad(data) {
        if (data && data.params) {
            this.params = JSON.parse(decodeURIComponent(data.params))
            this.taskManagementId = this.params.taskManagementId
            this.blindBoxReceiptsRecordId = this.params.blindBoxReceiptsRecordId
            this.receiptsRecordId = this.params.receiptsRecordId
            this.blindBoxId = this.params.blindBoxId
        }
    },
    onReady(){

    },
    onShow() {


        this.blindBoxAllGiftsList()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // // 我的礼品详情
        tocheckedInfo(item){
            uni.navigateTo({
                url:'/pages/blindBox/myGiftInfo?params=' +
                    encodeURIComponent(JSON.stringify({winningType:item.type}))
            })
        },
        // 盲盒礼品列表
        blindBoxAllGiftsList(){
            blindboxAllPriceApi({blindBoxId:this.blindBoxId}).then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.giftList = res.data
                }
            })
        }
       
    }
}
</script>

<style lang="scss" scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
    // padding-bottom: calc(0rpx + env(safe-area-inset-bottom));
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;

    .title{
        font-size: 60rpx;
        line-height: 60rpx;
        text-align: left;
        color: #111111;
    }
    .giftListBox{
        margin-top: 40rpx;

        .giftItemBox{
            display: flex;
            // align-items: center;
            margin-bottom: 40rpx;

            .giftContent{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding-left: 40rpx;
                margin-top: 10rpx;
                margin-bottom: 12rpx;

                .giftNum{
                    font-weight: 400;
                    font-size: 28rpx;
                    text-align: left;
                    color: #999;
                    margin-top: 24rpx;
                }
                .giftDescription{
                    font-size: 24rpx;
                    color: #666666;
                    line-height: 24rpx;
                }
                .checkButton{
                    // width: 115rpx;
                    width: 60%;
                    font-size: 28rpx;
                    // line-height: 22rpx;
                    height: 58rpx;
                    line-height: 58rpx;
                    // padding: 14rpx 0px;
                    border-radius: 50rpx;
                    text-align: center;
                    color: #111111;
                    border: 1px solid #111111;

                }
                .giftName{
                    font-weight: bold;
                    font-size: 38rpx;
                    text-align: left;
                    color: #000;
                }
               
            }
        }
        .giftItemBox:last-child{
            margin-bottom: 0px;
        }
    }
    .emptyBox{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 60vh;
    }
}
.tasksIcon{
    width: 242rpx;
    height:242rpx;
    background-color: #F7F7F7;
    display: flex;
    align-items: center;
    justify-content: center;

    .couponPic{
        width: 126rpx;
        height: 164rpx;
    }
    .integralPic{
        width: 128rpx;
        height: 128rpx;
    }
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}
::v-deep .van-empty {
    border-radius: 12px;
    padding: 0px !important;
}

::v-deep .van-empty__image{
    width: 400rpx !important;
    height: 400rpx !important;
    text-align: center;
}
::v-deep .van-empty__description {
	// font-weight: bold;
    font-size: 36rpx !important;
    text-align: center;
    color: #333 !important;
}
::v-deep .van-icon {
    color: #242629 !important;
}

// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
::v-deep .van-button--primary {
    width: 670rpx;
    height: 96rpx;
    border-radius: 48rpx;
    background: #FF6203 !important;
    border: 1px solid #ff6203 !important;
}
</style>
